<template>
  <view class="cards-container">
    <scroll-view 
      class="card-list"
      scroll-y
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefreshing"
    >
      <view class="card-item" 
        v-for="(card, index) in cardList" 
        :key="index"
        :class="[
          card.level,
          card.remainingTimes < 1 ? 'disabled' : ''
        ]"
        @tap="goToAppointment(card)"
      >
        <image 
          class="card-bg" 
          :src="'/static/images/index_page.png'"
          mode="aspectFill"
        />
        <view class="card-level">
          <text class="level-text">{{ card.levelName }}</text>
          <text class="card-no">NO.{{ card.cardNo }}</text>
        </view>
        
        <view class="card-info">
          <view class="user-info">
            <text class="nickname">{{ card.nickname }}</text>
            <text class="create-time">开卡时间：{{ card.createTime }}</text>
          </view>
          
          <view class="detail-info">
            <view class="info-item">
              <text class="label">剩余次数</text>
              <text class="value">{{ card.remainingTimes }}次</text>
            </view>
            <view class="info-item">
              <text class="label">开卡技师</text>
              <text class="value">{{ card.technician }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-state" v-if="cardList.length === 0">
        <image src="/static/images/index_page.png" mode="aspectFit"></image>
        <text>暂无会员卡</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      isRefreshing: false
    }
  },
  methods: {
    async getCardList() {
      try {
        // 模拟会员卡数据
        const mockCards = [
          {
            id: 1,
            cardNo: '20240001',
            level: 'black',
            levelName: '黑金会员',
            nickname: '张小姐',
            createTime: '2024-03-20',
            remainingTimes: 12,
            technician: '小美'
          },
          {
            id: 2,
            cardNo: '20240002',
            level: 'gold',
            levelName: '黄钻会员',
            nickname: '李小姐',
            createTime: '2024-03-18',
            remainingTimes: 8,
            technician: '小丽'
          },
          {
            id: 3,
            cardNo: '20240003',
            level: 'silver',
            levelName: '白银会员',
            nickname: '王小姐',
            createTime: '2024-02-15',
            remainingTimes: 5,
            technician: '小红'
          },
          {
            id: 4,
            cardNo: '20240004',
            level: 'bronze',
            levelName: '青铜会员',
            nickname: '赵小姐',
            createTime: '2024-01-20',
            remainingTimes: 3,
            technician: '小芳'
          }
        ];

        // 模拟分页
        const startIndex = (this.page - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        const pageData = mockCards.slice(startIndex, endIndex);
        
        if (this.page === 1) {
          this.cardList = pageData;
        } else {
          this.cardList = [...this.cardList, ...pageData];
        }
        
        this.hasMore = endIndex < mockCards.length;
      } catch (e) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    async loadMore() {
      if (!this.hasMore) return
      this.page++
      await this.getCardList()
    },
    
    async onRefresh() {
      this.isRefreshing = true
      this.page = 1
      await this.getCardList()
      this.isRefreshing = false
    },
    
    goToAppointment(card) {
      if (card.remainingTimes < 1) {
        uni.showToast({
          title: '剩余次数不足',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      uni.navigateTo({
        url: `/subpages/appointment/appointment?cardId=${card.id}`
      })
    }
  },
  
  onLoad() {
    this.getCardList()
  }
}
</script>

<style lang="scss" scoped>
.cards-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
  
  .card-list {
    height: 100%;
    
    .card-item {
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      padding: 40rpx;
      color: #fff;
      position: relative;
      overflow: hidden;
      
      .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
        z-index: 1;
      }
      
      &.black, &.gold, &.silver, &.bronze {
        background: none;
      }
      
      .card-level {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40rpx;
        position: relative;
        z-index: 3;
        
        .level-text {
          font-size: 36rpx;
          font-weight: bold;
        }
        
        .card-no {
          font-size: 24rpx;
          opacity: 0.8;
        }
      }
      
      .card-info {
        position: relative;
        z-index: 3;
        
        .user-info {
          margin-bottom: 40rpx;
          
          .nickname {
            display: block;
            font-size: 32rpx;
            margin-bottom: 10rpx;
          }
          
          .create-time {
            font-size: 24rpx;
            opacity: 0.8;
          }
        }
        
        .detail-info {
          display: flex;
          justify-content: space-between;
          
          .info-item {
            .label {
              display: block;
              font-size: 24rpx;
              opacity: 0.8;
              margin-bottom: 8rpx;
            }
            
            .value {
              font-size: 28rpx;
              font-weight: 500;
            }
          }
        }
      }
      
      &:active {
        transform: scale(0.98);
        transition: transform 0.2s ease;
      }
      
      &.disabled {
        opacity: 0.6;
        
        &:active {
          transform: none;
        }
      }
    }
  }
  
  .empty-state {
    padding: 100rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }
    
    text {
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style> 